<template>
  <div class="demo-title">date-picker/demo4</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="time.show()">选项过滤</div>
  </div>
  <DatePicker v-model:visible="time.visible" v-model="time.value" type="time" title="时间选择" :filter="time.filter" @confirm="time.onConfirm" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import DatePicker from '@sscd-mobile/date-picker'
  const time = reactive({
    visible: false,
    show: () => time.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    filter: (type, options) => {
      if (type === 'hour') {
        options = options.filter((option) => Number(option.value) % 6 === 0)
      } else if (type === 'minute') {
        options = options.filter((option) => Number(option.value) % 10 === 0)
      } else if (type === 'seconds') {
        options = options.filter((option) => Number(option.value) === 0)
      }
      return options
    },
    onConfirm: (res) => console.log('onConfirm: ', res, time.value)
  })
</script>

<style scoped></style>
